<script lang="ts" setup>
import { DataSource, GeoJsonDataSource } from 'cesium';
import { viewerKey } from '@/assets/keys/example.keys';
import ExHover from '@comps/ExHover.vue';

const viewer = inject(viewerKey);
if (!viewer) throw new Error('没有提供 Viewer！');

let sideEffectCleaner: () => void;
let localDataSouce: DataSource;
watch(
  viewer,
  async (viewer) => {
    if (!viewer) return;

    /**
     * 获取 GeoJson 数据。
     * 这一步可以被网络请求替代。
     */
    const geoJsonData = await import('./points.json');

    // 通过 GeoJsonDataSource.load() 得到加载后的 DataSource。
    const dataSource = await GeoJsonDataSource.load(geoJsonData);

    // 启用 Cluster 效果。
    dataSource.clustering.enabled = true;

    // 添加 Cluster 聚合事件。
    dataSource.clustering.clusterEvent.addEventListener((entities, cluster) => {
      cluster.label.show = true;
      cluster.label.text = entities.length.toLocaleString();
    });

    // 将 DataSource 加入 Viewer 以供显示。
    viewer.dataSources.add(dataSource);

    // 副作用清除函数。
    sideEffectCleaner = () => viewer.dataSources.remove(dataSource);

    // 让加载的数据呈现在可视范围内。
    viewer.flyTo(dataSource);

    localDataSouce = dataSource;
  },
  { immediate: true },
);
const resetLocation = () => localDataSouce && viewer.value?.flyTo(localDataSouce);

/**
 * 清除副作用以避免在观看其他示例或代码热重载时出现问题。
 */
onBeforeUnmount(() => sideEffectCleaner?.());
</script>

<template>
  <ExHover title="聚合">
    <button class="btn btn-small" @click="resetLocation">复位</button>
  </ExHover>
</template>
